<template>
    <div>
        会员名称:
        <input type="text" v-model="data.queryInfo.name">
        会员等级:
        <select v-model="data.queryInfo.levelId">
            <option value="">请选择</option>
            <option :value="item.Id" v-for="item in data.level">{{ item.Name }}</option>
        </select>
        <input type="button" value="查询" @click="getMember" class="btn btn-primary">

    </div>

    <div>
        <table class="table table-bordered">
            <tbody>
                <tr>
                    <th>编号</th>
                    <th>会员卡号</th>
                    <th>联系方式</th>
                    <th>用户名</th>
                    <th>身份证</th>
                    <th>等级</th>
                    <th>生日</th>
                    <th>性别</th>
                    <th>状态</th>
                    <th>积分</th>
                    <th>余额</th>
                    <th>操作</th>
                </tr>
                <tr v-for="item in data.list">
                    <td>{{ item.Id }}</td>
                    <td>{{ item.MemberCode }}</td>
                    <td>{{ item.Phone.substring(0, 3) + "****" + item.Phone.substring(7, 4) }}</td>
                    <td>{{ item.UserName }}</td>
                    <td>{{ item.Card }}</td>
                    <td>{{ item.LevelName }}</td>
                    <td>{{ item.BirthDay.substr(0, 10) }}</td>
                    <td>{{ item.Sex == 1 ? "男" : "女" }}</td>
                    <td>{{ item.State=1 ? "可用" : "禁用" }}</td>
                    <td>{{ item.Integration }}</td>
                    <td style="color:red;">￥{{ item.Money }}</td>
                    <td>
                        <input type="button" value="修改" class="btn btn-success" @click="upd(item.Id)">
                        <input type="button" value="删除" class="btn btn-danger" @click="del(item.Id)">
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import moment from 'moment';
import axios from 'axios';
import { useRoute, useRouter } from 'vue-router'

const routetr = useRouter();

onMounted(() => {
    getMember();
    getLevel();
})

let data: any = reactive({
    list: [],
    level: [],
    queryInfo: {
        name: "",
        levelId: "",
    }
})

const getMember = () => {
    axios({
        method: 'get',
        url: '/api/Member/ShowMember',
        params: data.queryInfo
    })
        .then(res => {
            data.list = res.data
            console.log(res);

        })
        .catch(err => {
            console.log(err);

        })
}

const getLevel = () => {
    axios({
        method: 'get',
        url: '/api/Member/GetMemberLevels',

    })
        .then(res => {
            data.level = res.data
            console.log(res);

        })
        .catch(err => {
            console.log(err);

        })
}

const upd = (id: any) => {
    routetr.push({
        path: '/memberUpd',
        query: {
            id: id
        }
    })
}

const del = (id: any) => {
    if (!confirm("确定删除吗?")) {
        return;
    }

    axios({
        method: 'delete',
        url: '/api/Member/DelMember',
        params: {
            id: id
        }
    })
        .then(res => {
            if (res.data > 0) {
                alert("删除成功")
                getMember();
            }
            else {
                alert("删除失败")
            }
        })
        .catch(err => {
            console.log(err);

        })

}

</script>

<style scoped></style>